<link rel='import' href='../../bower/core-overlay/core-overlay.html'>
<link rel="import" href="../../bower/core-signals/core-signals.html">
<link rel='import' href='../../bower/paper-checkbox/paper-checkbox.html'>
<link rel='import' href='../../bower/paper-input/paper-input-decorator.html'>
<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='button.html'>
<link rel='import' href='dialog.html'>

<polymer-element name='uproxy-network-invite-user' attributes="network">
  <template>
    <style>
      core-overlay {
        height: 100%;
        width: 100%;
        background-color: white;
      }
      uproxy-button {
        margin: 0;
        padding-left: 1em;
        padding-right: 1em;
      }
      a {
        cursor: pointer;
      }
      p {
        font-size: 13px;
        letter-spacing: .3px;
        margin-top: 0px;
      }
      paper-input-decorator {
        font-size: 16px;
      }
      paper-input-decorator /deep/ .underline div {
        background-color: #dddddd !important;
      }
      .section {
        padding: 2.3em 2.3em 0em 2.3em;
        line-height: 20px;
      }
      .checkboxes {
        margin-top: 1em;
        margin-bottom: 2em;
      }

      /* Social network specific CSS */
      .GitHub uproxy-button,
      .GitHub uproxy-app-bar::shadow #app-bar-toolbar {
        background: #666 !important;
      }
      .GitHub paper-checkbox::shadow #checkbox.checked {
        background-color: #666;
        border-color: #666;
      }
      .GMail uproxy-button,
      .GMail uproxy-app-bar::shadow #app-bar-toolbar {
        background: #dd4b39 !important;
      }
      .GMail paper-checkbox::shadow #checkbox.checked {
        background-color: #dd4b39;
        border-color: #dd4b39;
      }
      .Facebook-Firebase-V2 uproxy-button,
      .Facebook-Firebase-V2 uproxy-app-bar::shadow #app-bar-toolbar {
        background: #3b5998 !important;
      }
      .Facebook-Firebase-V2 paper-checkbox::shadow #checkbox.checked {
        background-color: #3b5998;
        border-color: #3b5998;
      }
    </style>

    <uproxy-state id="state"></uproxy-state>
    <core-signals on-core-signal-open-network-invite-dialog='{{openInviteUserPanel}}'></core-signals>

    <core-overlay id='networkInviteUserPanel' class='{{ network }}'>
      <uproxy-app-bar on-go-back='{{ close }}'>
        {{ 'INVITE_A_FRIEND' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='section'>
        <p>{{ instructions }}</p>

        <!-- GitHub specific controls -->
        <div hidden?="{{network !== 'GitHub'}}">
          <paper-input-decorator id='GitHubPlaceholder' label='{{ "GITHUB_INVITE_PLACEHOLDER" | $$(model.globalSettings.language) }}'>
            <input is='core-input' value='{{ gitHubUserIdInput }}'>
          </paper-input-decorator>
        </div>

        <!-- GMail specific controls -->
        <div hidden?="{{network !== 'GMail'}}">
          <paper-input-decorator id='GMailPlaceholder' label='{{ "EMAIL_PLACEHOLDER" | $$(model.globalSettings.language) }}' layout vertical>
            <input is='core-input' value='{{ inviteUserEmail }}' />
          </paper-input-decorator>
        </div>

        <div class='checkboxes'>
          <p><paper-checkbox id='requestAccessCheckbox' label='{{ "REQUEST_ACCESS" | $$(model.globalSettings.language) }}' checked='{{ requestAccess }}'></paper-checkbox></p>
          <p><paper-checkbox id='offerAccessCheckbox' label='{{ "OFFER_ACCESS" | $$(model.globalSettings.language) }}' checked='{{ offerAccess }}'></paper-checkbox></p>
        </div>

        <uproxy-button id='confirmButton' affirmative on-tap='{{ confirmClicked }}'>{{ confirmText }}</uproxy-button>

        <!-- Quiver specific controls -->
        <div hidden?="{{network !== 'Quiver'}}">
          <paper-input-decorator layout vertical hidden?='{{ inviteUrl.length === 0}}'>
            <input value='{{ inviteUrl }}' readonly is='core-input' on-tap='{{ select }}' />
          </paper-input-decorator>
        </div>

      </div>  <!-- end of .section -->
    </core-overlay>

  </template>
  <script src='network-invite-user.js'></script>
</polymer-element>
